<template>
	<u-popup class="gifts-pop-box" v-model="show" :custom-style="customStyle" :safe-area-inset-bottom="false"
		:mask-custom-style="{background: 'rgba(0, 0, 0, 0)'}" mode="bottom" border-radius="32" height="760rpx">
		<view class="content">
			<view class="content-top">
				<text class="title">礼物</text>
			</view>
			<view class="content-actions">
				<text class="wallet">余额：{{userInfo.wallet}} 钻</text>
				<text class="recharge" @click="openPayPop">充值 ></text>
			</view>
			<scroll-view scroll-y="true" style="height: 550rpx;">
				<view class="gifts-box">
					<!-- 循环渲染礼物数据 -->
					<view class="gift-item" v-for="(gift, index) in gifts" :key="index"
						:class="{ selected: gift.selected }" @click="selectGift(gift.id)">
						<image class="gift-image" :src="gift.image"></image>
						<!-- 根据是否选中显示不同内容 -->
						<text v-if="!gift.selected" class="gift-name">{{ gift.name }}</text>
						<text class="gift-price">{{ gift.price }} 钻</text>
						<view v-if="gift.selected" class="send-button">赠送</view>
					</view>
				</view>
			</scroll-view>

		</view>
	</u-popup>
</template>

<script>
	import {
		getGiftList,
		gifGive
	} from '@/api/game.js'
	export default {
		components: {

		},
		props: {
			storyId: {
				type: [Number, String]
			},
			gameId: {
				type: [Number, String]
			},
		},
		data() {
			return {

				show: false,
				userInfo: {
					wallet: 29,
				},
				customStyle: {
					// 'background': '#6236FF',
				},

				// 礼物列表数据示例
				gifts: [

					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/yunzhiwen.png',
					// 	name: '云之吻',
					// 	price: '1',
					// 	selected: true,
					// 	id: 1,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/yunzhiwen.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/ainiyao.png',
					// 	name: '爱你吆',
					// 	price: '2',
					// 	selected: false,
					// 	id: 2,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/ainiyao.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/feiwen.png',
					// 	name: '飞吻',
					// 	price: '2',
					// 	selected: false,
					// 	id: 3,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/feiwen.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/fengche.png',
					// 	name: '风车',
					// 	price: '2',
					// 	selected: false,
					// 	id: 4,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/fengche.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/baobao.png',
					// 	name: '女神包包',
					// 	price: '9.9',
					// 	selected: false,
					// 	id: 13,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/baobao.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/xingzhoufanxin.png',
					// 	name: '星舟泛心',
					// 	price: '19',
					// 	selected: false,
					// 	id: 61,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/xingzhoufanxin.svga'
					// }, {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/meiguihua.png',
					// 	name: '玫瑰花',
					// 	price: '6.9',
					// 	selected: false,
					// 	id: 7,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/meiguihua.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/rose.png',
					// 	name: '浪漫满屋',
					// 	price: '99',
					// 	selected: false,
					// 	id: 8,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/rose.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/youleyuan.png',
					// 	name: '游乐园',
					// 	price: '99',
					// 	selected: false,
					// 	id: 9,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/youleyuan.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/xingyuezhitu.png',
					// 	name: '星月之兔',
					// 	price: '79',
					// 	selected: false,
					// 	id: 12,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/xingyuezhitu.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/haohuapaoche.png',
					// 	name: '豪华跑车',
					// 	price: '199',
					// 	selected: false,
					// 	id: 10,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/posche.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/haohuayouting.png',
					// 	name: '豪华游艇',
					// 	price: '219',
					// 	selected: false,
					// 	id: 11,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/youlun.svga'
					// },
					// {
					// 	image: 'https://cdn.osisx.com/wenzhu/images/gifts/feiji.png',
					// 	name: '飞机',
					// 	price: '228',
					// 	selected: false,
					// 	id: 5,
					// 	svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/feiji.svga'
					// },


				]
			}
		},
		onLoad(option) {
			console.log("加载弹窗");


		},

		onReady() {

		},
		methods: {
			openPayPop() {
				this.$emit('openPayPop')
			},
			playSvga(gift) {
				console.log(gift, '点击礼物---------')
				this.close()
				this.$emit('playSvga', {
					...gift,
					playType: "gift"
				})
			},
			open() {
				this.show = true
				this.getGiftList()
			},
			close() {
				this.show = false
			},
			/**
			 * @desc 获取礼物列表
			 */
			async getGiftList() {
				try {
					let res = await getGiftList({
						storyId: this.storyId,
						gameId: this.gameId
					})

					this.gifts = [...res.data.result].map((item, index) => {
						let obj = {
							id: item.id,
							name: item.giftName,
							price: item.giftPrice,
							image: item.giftImage,
							svgaSrc: item.giftEffect
						}
						if (index === 0) {
							obj.selected = true
						} else {
							obj.selected = false
						}
						return obj
					})
				} catch (e) {
					this.gifts = [

						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/yunzhiwen.png',
							name: '云之吻',
							price: '1',
							selected: true,
							id: 1,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/yunzhiwen.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/ainiyao.png',
							name: '爱你吆',
							price: '2',
							selected: false,
							id: 2,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/ainiyao.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/feiwen.png',
							name: '飞吻',
							price: '2',
							selected: false,
							id: 3,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/feiwen.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/fengche.png',
							name: '风车',
							price: '2',
							selected: false,
							id: 4,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/fengche.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/baobao.png',
							name: '女神包包',
							price: '9.9',
							selected: false,
							id: 13,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/baobao.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/xingzhoufanxin.png',
							name: '星舟泛心',
							price: '19',
							selected: false,
							id: 61,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/xingzhoufanxin.svga'
						}, {
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/meiguihua.png',
							name: '玫瑰花',
							price: '6.9',
							selected: false,
							id: 7,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/meiguihua.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/rose.png',
							name: '浪漫满屋',
							price: '99',
							selected: false,
							id: 8,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/rose.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/youleyuan.png',
							name: '游乐园',
							price: '99',
							selected: false,
							id: 9,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/youleyuan.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/xingyuezhitu.png',
							name: '星月之兔',
							price: '79',
							selected: false,
							id: 12,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/xingyuezhitu.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/haohuapaoche.png',
							name: '豪华跑车',
							price: '199',
							selected: false,
							id: 10,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/posche.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/haohuayouting.png',
							name: '豪华游艇',
							price: '219',
							selected: false,
							id: 11,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/youlun.svga'
						},
						{
							image: 'https://cdn.osisx.com/wenzhu/images/gifts/feiji.png',
							name: '飞机',
							price: '228',
							selected: false,
							id: 5,
							svgaSrc: 'https://cdn.osisx.com/wenzhu/images/gifts/feiji.svga'
						},


					]
				}

				// console.log(this.giftDatas, '解析好的数据');
			},
			// 赠送礼物
			// gifGive(gifId){
			// 	gifGive({giftId}).then(res=>{

			// 	})
			// },
			// 处理礼物选中状态的方法
			selectGift(id) {
				this.gifts.map((gift, i) => {
					if (id === gift.id) {
						if (!gift.selected) {
							// 切换选中状态
							gift.selected = true
						} else {
							//已选中 则直接触发赠送
							this.sendGift(gift, id)
						}

					} else gift.selected = false; // 重置其他礼物为未选中状态

				});
			},
			/**
			 * @desc 优先判断余额 是否走充值 再进行赠送
			 */
			sendGift(gift, giftId) {
				this.playSvga(gift)
				return
				if (gift.price > this.userInfo.wallet) {
					// 充值
					this.openPayPop()
				} else {
					gifGive({
						giftId
					}).then(res => {
						// 扣款并赠送
						this.playSvga(gift)
					})

				}
			},
		},
	}
</script>

<style lang='scss' scoped>
	@import url('./index.scss');
</style>